.banner { background: url(../images/index/banner_top.jpg) no-repeat; overflow: hidden; width: 1000px; margin: 0 auto; margin-top: 60px;} .texts {
  width: 350px;
  line-height: 26px;
  margin: 60px 0 0 20px;
  float: left;
  font-size: 14px;
  color: #FFF;
 }

 .texts p {
  -webkit-transform: translate(60px);
  -moz-transform: translate(60px);
  -o-transform: translate(60px);
  -ms-transform: translate(60px);
  transform: translate(60px);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3);
 }

 .texts p:nth-child(1) {
  -webkit-animation: animations 3s ease-out 1s backwards;
  -moz-animation: animations 3s ease-out 1s backwards;
  -o-animation: animations 3s ease-out 1s backwards;
  -ms-animation: animations 3s ease-out 1s backwards;
  animation: animations 3s ease-out 1s backwards;
 }

 .texts p:nth-child(2) {
  -webkit-animation: animations 3s ease-out 4s backwards;
  -moz-animation: animations 3s ease-out 4s backwards;
  -o-animation: animations 3s ease-out 4s backwards;
  -ms-animation: animations 3s ease-out 4s backwards;
  animation: animations 3s ease-out 4s backwards;
 }

 .texts p:nth-child(3) {
  -webkit-animation: animations2 5s ease-in-out 7s backwards;
  -moz-animation: animations2 5s ease-in-out 7s backwards;
  -o-animation: animations2 5s ease-in-out 7s backwards;
  -ms-animation: animations2 5s ease-in-out 7s backwards;
  animation: animations2 5s ease-in-out 7s backwards;
 }

 .texts p:nth-child(4) {
  -webkit-animation: animations 9s ease-in-out 8s backwards;
  -moz-animation: animations2 5s ease-in-out 7s backwards;
  -o-animation: animations2 5s ease-in-out 7s backwards;
  -ms-animation: animations2 5s ease-in-out 7s backwards;
  animation: animations2 5s ease-in-out 7s backwards;
 }

 @-webkit-keyframes animations {
  0% {
   -webkit-transform: translate(0);
   opacity: 0;
  }

  50% {
   -webkit-transform: translate(30px);
   opacity: .5;
  }

  100% {
   -webkit-transform: translate(60px);
   opacity: 1;
  }
 }

 @-moz-keyframes animations {
  0% {
   -moz-transform: translate(0);
   opacity: 0;
  }

  50% {
   -moz-transform: translate(30px);
   opacity: .5;
  }

  100% {
   -moz-transform: translate(60px);
   opacity: 1;
  }
 }

 @-o-keyframes animations {
  0% {
   -o-transform: translate(0);
   opacity: 0;
  }

  50% {
   -o-transform: translate(30px);
   opacity: .5;
  }

  100% {
   -o-transform: translate(60px);
   opacity: 1;
  }
 }

 @-ms-keyframes animations {
  0% {
   -ms-transform: translate(0);
   opacity: 0;
  }

  50% {
   -ms-transform: translate(30px);
   opacity: .5;
  }

  100% {
   -ms-transform: translate(60px);
   opacity: 1;
  }
 }

 @keyframes animations {
  0% {
   transform: translate(0);
   opacity: 0;
  }

  50% {
   transform: translate(30px);
   opacity: .5;
  }

  100% {
   transform: translate(60px);
   opacity: 1;
  }
 }

 @-webkit-keyframes animations2 {
  0% {
   opacity: 0;
  }

  40% {
   opacity: .8;
  }

  45% {
   opacity: .3;
  }

  50% {
   opacity: .8;
  }

  55% {
   opacity: .3;
  }

  60% {
   opacity: .8;
  }

  100% {
   opacity: 1;
  }
 }

 @-moz-keyframes animations2 {
  0% {
   opacity: 0;
  }

  40% {
   opacity: .8;
  }

  45% {
   opacity: .3;
  }

  50% {
   opacity: .8;
  }

  55% {
   opacity: .3;
  }

  60% {
   opacity: .8;
  }

  100% {
   opacity: 1;
  }
 }

 @-o-keyframes animations2 {
  0% {
   opacity: 0;
  }

  40% {
   opacity: .8;
  }

  45% {
   opacity: .3;
  }

  50% {
   opacity: .8;
  }

  55% {
   opacity: .3;
  }

  60% {
   opacity: .8;
  }

  100% {
   opacity: 1;
  }
 }

 @-ms-keyframes animations2 {
  0% {
   opacity: 0;
  }

  40% {
   opacity: .8;
  }

  45% {
   opacity: .3;
  }

  50% {
   opacity: .8;
  }

  55% {
   opacity: .3;
  }

  60% {
   opacity: .8;
  }

  100% {
   opacity: 1;
  }
 }

 @keyframes animations2 {
  0% {
   opacity: 0;
  }

  40% {
   opacity: .8;
  }

  45% {
   opacity: .3;
  }

  50% {
   opacity: .8;
  }

  55% {
   opacity: .3;
  }

  60% {
   opacity: .8;
  }

  100% {
   opacity: 1;
  }
 }
.weather { background: url(../images/index/weather_bg.png) no-repeat !important; height: 88px; margin: 20px 0;padding: 20px 0 0 110px; border-radius: 8px;}
.l_box { width: 30%; float: left }
.r_box { width: 68%; float: right }
.l_box h2 { color: #333; font-size: 14px; line-height: 30px; padding-left: 20px; background: #fff }
.l_box div { background: rgba(255,255,255,0.5); margin-bottom: 20px; overflow: hidden }
.l_box div ul { padding: 10px; overflow: hidden }
.about_me img { width: 100% }
.about_me p { line-height: 24px; font-size: 14px }
.about_me i { width: 120px; float: left; clear: left; margin-right: 10px; height: 90px; overflow: hidden }
.wdxc li { width: 32%; overflow: hidden; float: left; height: 80px; margin-bottom: 2px; margin-right: 2px }
.wdxc li img { height: 100%; min-height: 80px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.wdxc li img:hover { transform: scale(1.05) }
.fenlei li { margin-bottom: 10px; margin-left: 10px }
.tuijian li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 5px; background: url(../images/index/li.png) left center no-repeat; padding-left: 20px }
.links a { display: block; float: left; margin: 0 10px 5px 0 }
.guanzhu img { width: 100% }
.l_box .search { border: 1px solid #000; background: #000; border-radius: 0 5px 5px 0; position: relative; }
.search input.input_submit { border: 0; background: 0; color: #fff; outline: none; position: absolute; top: 10px; right: 8% }
.search input.input_text { border: 0; line-height: 36px; height: 36px; width: 72%; padding-left: 10px; outline: none }
.r_box li { background: rgba(255,255,255,0.8); padding: 15px; overflow: hidden; color: #797b7c; margin-bottom: 20px }
.r_box li h3 { font-size: 16px; line-height: 25px; text-shadow: #FFF 1px 1px 1px }
.r_box li h3 a { color: #222 }
.r_box li h3 a:hover { color: #000; text-decoration: underline }
.r_box li img { float: right; clear: right; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.r_box li i { width: 150px; display: block; max-height: 100px; overflow: hidden; float: right; margin-left: 20px }
.r_box li p { margin: 20px 0 0 0; line-height: 22px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.r_box li:hover img { transform: scale(1.05) }
.r_box li:hover h3 a { color: #19585d; }
.pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }
.pagelist a { color: #666; margin: 0 2px; border: 1px solid #fff; padding: 5px 10px; background: #FFF }
.pagelist a:hover { color: #19585d; }
.pagelist > b { border: 1px solid #000; padding: 5px 10px; }
a.curPage { color: #19585d; font-weight: bold; }
/*about*/
.about{ padding: 20px; background: rgba(255,255,255,0.8);}
.about img{ max-width:500px; margin:20px 0; width:100%}
.cloud ul a { line-height: 24px; height: 24px; display: block; background: #999; float: left; padding: 3px 11px; margin: 10px 10px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; color: #FFF }
.cloud ul a:nth-child(8n-7) { background: #8A9B0F }
.cloud ul a:nth-child(8n-6) { background: #EB6841 }
.cloud ul a:nth-child(8n-5) { background: #3FB8AF }
.cloud ul a:nth-child(8n-4) { background: #FE4365 }
.cloud ul a:nth-child(8n-3) { background: #FC9D9A }
.cloud ul a:nth-child(8n-2) { background: #EDC951 }
.cloud ul a:nth-child(8n-1) { background: #C8C8A9 }
.cloud ul a:nth-child(8n) { background: #83AF9B }
.cloud ul a:first-child { background: #036564 }
.cloud ul a:last-child { background: #3299BB }
.cloud ul a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }
.picbox { width: 100%; overflow: hidden;  }
.picbox ul { overflow: hidden; width: 24%; float: left; margin-right:10px }
.picbox ul li { display: block; background: #FFF; margin: 0 0 20px 0; border: 1px #d9d9d9 solid; }
.picbox ul li i { margin: 10px; height: auto; overflow: hidden; display: block; }
.picbox ul li img { width: 100%; }
.picinfo h3 { border-bottom: #ccc 1px solid; padding: 10px 0; margin: 0 20px; font-size:16px }
.picinfo span { padding:10px 20px; display: block; color: #666; }
.picbox ul li a:hover{ color:#19585d}
 .texts { width: 350px; line-height: 26px; margin: 60px 0 0 20px; float: left; font-size: 14px; color:#FFF;}
 .texts p { -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3); }
 .texts p:nth-child(1) { -webkit-animation: animations 3s ease-out 1s backwards; -moz-animation: animations 3s ease-out 1s backwards; -o-animation: animations 3s ease-out 1s backwards; -ms-animation: animations 3s ease-out 1s backwards; animation: animations 3s ease-out 1s backwards; }
 .texts p:nth-child(2) { -webkit-animation: animations 3s ease-out 4s backwards; -moz-animation: animations 3s ease-out 4s backwards; -o-animation: animations 3s ease-out 4s backwards; -ms-animation: animations 3s ease-out 4s backwards; animation: animations 3s ease-out 4s backwards; }

 .texts p:nth-child(3) { -webkit-animation: animations2 5s ease-in-out 7s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; -ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s backwards; }
 .texts p:nth-child(4) { -webkit-animation: animations 9s ease-in-out 8s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; -ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s backwards; }
 .avatar { float: right; margin: 40px; width: 130px; height: 130px; border-radius: 100%; overflow: hidden; border: #FFF 4px solid }
 .avatar a { display: block; padding-top: 97px; width: 160px; background: url(../images/index/photos.jpg) no-repeat; background-size: 130px 130px }
 .avatar a span { display: block; margin-top: 63px; padding-top: 8px; width: 130px; height: 55px; text-align: center; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-transition: margin-top .2s ease-in-out; -moz-transition: margin-top .2s ease-in-out; -o-transition: margin-top .2s ease-in-out; transition: margin-top .2s ease-in-out; }
 .avatar a:hover span { display: block; margin-top: 0; }
 .memorial_day { width: 1000px; margin:8px auto auto; overflow: hidden; position: relative; padding: 60px; background: url(../images/index/day.png) no-repeat 400px 30px }
 .memorial_day ul li a { margin-top: 30px; display: block; color: #e04b4b }
 .memorial_day ul li a:hover { text-decoration: underline }
 .memorial_day ul li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; position: absolute; background: #f8e0d3; border: 3px solid #a73c3c; }
 .memorial_day ul li:hover::before { background: #fe7008; border-color: #fe7008; }
 .memorial_day ul li.n1 { position: absolute; top: 54px; left: 90px }
 .memorial_day ul li.n2 { position: absolute; top: 54px; left: 220px }
 .memorial_day ul li.n3 { position: absolute; top: 54px; left: 590px }
 .memorial_day ul li.n4 { position: absolute; top: 54px; left: 760px }
 .memorial_day ul li.n5 { position: absolute; top: 54px; left: 890px }
 .dateview { position: absolute; top: -50px; left: 20px; display: block; width: 88px; background: url(../images/index/dtime.png) no-repeat; color: #FFF; height: 46px; line-height: 30px; text-align: center }
 .time_axis { background: #e31e3a; height: 6px; width: 100%; animation: time_a 5s; -moz-animation: time_a 5s; /* Firefox */ -webkit-animation: time_a 5s; /* Safari and Chrome */ -o-animation: time_a 5s; /* Opera */ }

